﻿<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor图片对话框</title>

    <script>
        var SiteConfig = window.parent.SiteConfig || {};;
        if (typeof vui == "undefined") {
            vui = {}
        }
    </script>    
    
    <!-- jquery -->
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>

    <!--ListPage-->
    <script type='text/javascript' src='../../../../FrameWeb/FrameScripts/vui.1.0/vui.ListPage.1.0.js'></script>
    <script type='text/javascript' src='../../../../FrameWeb/FrameScripts/vui.1.0/vui.UE.1.0.js'></script>
    <link href="../../../../FrameWeb/FrameSkin/Green/css/vui.css" rel="stylesheet" />
    <script type="text/javascript" src="../internal.js"></script>


    <!-- webuploader -->
    <script src="../../third-party/webuploader/webuploader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">

    <!-- image dialog -->
    <link rel="stylesheet" href="image.css" type="text/css" />
    <!--<script type="text/javascript" src="../../../../FrameWeb/FrameScripts/vui.1.0/vui.1.0.js"></script>-->

    <style>
        /*浮动*/
        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clear {
            clear: both;
        }

        .ov_fl {
            overflow: hidden;
        }

        .mt_10 {
            margin-top: 10px;
        }

        .ml_20 {
            margin-left: 20px;
        }

        .w140 {
            width: 140px;
        }

        .h450 {
            height: 450px;
        }

        .pd20_35 {
            padding: 20px 35px;
        }

        /*input-text*/
        .input-text::-webkit-input-placeholder { /* WebKit browsers */
            color: #ccc;
        }

        .input-text::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #ccc;
        }

        .input-text::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #ccc;
        }

        .input-text::-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #ccc;
        }

        .input_text_img:hover {
            border: 1px solid #3bb4f2;
        }

        .input-text, .textarea {
            box-sizing: border-box;
            border: solid 1px #ddd;
            width: 100%;
            -webkit-transition: all 0.2s linear 0s;
            -moz-transition: all 0.2s linear 0s;
            -o-transition: all 0.2s linear 0s;
            transition: all 0.2s linear 0s;
        }

        .textarea {
            height: auto;
            font-size: 14px;
            padding: 4px;
        }

            .input-text:hover, .textarea:hover {
                border: solid 1px #3bb4f2;
            }
        /*得到焦点后*/
        .input-text.focus, textarea.focus {
            border: solid 1px #0f9ae0 \9;
            border-color: rgba(82,168,236,0.8);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        }
        /*不可点击*/
        .input-text.disabled, .textarea.disabled, .input-text.disabled.focus, .textarea.disabled.focus {
            background-color: #ededed;
            cursor: default;
            border-color: #ddd;
            -webkit-box-shadow: inset 0 2px 2px #e8e7e7;
            -moz-box-shadow: inset 0 2px 2px #e8e7e7;
            box-shadow: inset 0 2px 2px #e8e7e7;
        }
        /*只读状态*/
        .input-text.disabled, .textarea.disabled {
            background-color: #e6e6e6;
            cursor: default;
        }
        /*阴影*/
        .input-text.box-shadow, .textarea.box-shadow {
            -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        }
        /*样式*/
        .input-text, .btn, .input-text.size-M, .btn.size-M {
            font-size: 14px;
            height: 31px;
            *height: auto;
            line-height: 1.42857;
            padding: 4px;
        }
        /*默认为M，可以不写，可以理解为：均码*/
        a.btn, a.btn.size-M, span.btn, span.btn.size-M {
            line-height: 21px;
        }

        .btn, .btn.size-M {
            padding: 4px 12px;
        }

            .input-text.size-MINI, .btn.size-MINI {
                font-size: 12px;
                height: 23px;
                padding: 1px 2px;
                line-height: 1.42857;
            }
        /*迷你*/
        a.btn.size-MINI, span.btn.size-MINI {
            line-height: 21px;
        }

        .btn.size-MINI {
            padding: 1px 4px;
        }

        .input-text.size-S, .btn.size-S {
            font-size: 12px;
            height: 27px;
            padding: 3px;
            line-height: 1.42857;
        }
        /*小*/
        a.btn.size-S, span.btn.size-S {
            line-height: 19px;
        }

        .btn.size-S {
            padding: 3px 8px;
        }

        .input-text.size-L, .btn.size-L {
            font-size: 16px;
            height: 41px;
            padding: 8px;
        }
        /*大*/
        a.btn.size-L, span.btn.size-L {
            line-height: 23px;
        }

        .btn.size-L {
            padding: 8px 16px;
        }

        .input-text.size-XL, .btn.size-XL {
            font-size: 18px;
            height: 48px;
            padding: 10px;
        }
        /*特大*/
        a.btn.size-XL, span.btn.size-XL {
            line-height: 26px;
        }

        .btn.size-XL {
            padding: 10px 24px;
        }

        .folder {
            background: url("../../../../Skin/blue/images/folder.png") no-repeat;
            background-size: 100% 100%;
        }

            .folder.size-S {
                background: url("../../../../Skin/blue/images/folder.png") no-repeat;
                background-size: 100% 100%;
                height: 26px;
                width: 35px;
                display: inline-block;
            }

        .file-block-box, .upload-file-box {
            border-radius: 4px;
            width: 90px;
            height: 90px;
            padding: 5px;
            float: left;
            cursor: pointer;
        }

            .file-block-box.current {
                background: #F1F5FA;
            }

            .file-block-box .file-block {
                width: 90px;
                height: 60px;
                position: relative;
            }

                .file-block-box .file-block .play-icon {
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                }

                .file-block-box .file-block img {
                    width: 100%;
                    height: 100%;
                }

        .file-block-title {
            text-align: center;
            color: #666666;
            font-size: 12px;
            margin-top: 10px;
        }


        .icon-img.size-MINI {
            width: 15px;
            height: 15px;
        }
    </style>
</head>
<body>

    <div class="wrapper">
        <div id="tabhead" class="tabhead">
            <!--<span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>-->
            <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
            <!--<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>-->
            <!--<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>-->
            <span class="tab" data-content-id="materall">引入集团图片</span>
            <!--<span class="tab" data-content-id="matermy">引入公众号图片</span>-->
            <span class="tab" data-content-id="materimage">微信素材库</span>
        </div>
        <div class="alignBar">
            <label class="algnLabel"><var id="lang_input_align"></var></label>
            <span id="alignIcon">
                <span id="noneAlign" class="none-align focus" data-align="none"></span>
                <span id="leftAlign" class="left-align" data-align="left"></span>
                <span id="rightAlign" class="right-align" data-align="right"></span>
                <span id="centerAlign" class="center-align" data-align="center"></span>
            </span>
            <input id="align" name="align" type="hidden" value="none" />
        </div>
        <div id="tabbody" class="tabbody">

            <!-- 远程图片 -->
            <div id="remote" class="panel">
                <div class="top">
                    <div class="row">
                        <label for="url"><var id="lang_input_url"></var></label>
                        <span><input class="text" id="url" type="text" /></span>
                    </div>
                </div>
                <div class="left">
                    <div class="row">
                        <label><var id="lang_input_size"></var></label>
                        <span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width" />px </span>
                        <span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="height" />px </span>
                        <span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_border"></var></label>
                        <span><input class="text" type="text" id="border" />px </span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_vhspace"></var></label>
                        <span><input class="text" type="text" id="vhSpace" />px </span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_title"></var></label>
                        <span><input class="text" type="text" id="title" /></span>
                    </div>
                </div>
                <div class="right"><div id="preview"></div></div>
            </div>

            <!-- 上传图片 -->
            <div id="upload" class="panel focus">
                <div id="queueList" class="queueList">
                    <div class="statusBar element-invisible">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div><div class="info"></div>
                        <div class="btns">
                            <div id="filePickerBtn"></div>
                            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
                        </div>
                    </div>
                    <div id="dndArea" class="placeholder">
                        <div class="filePickerContainer">
                            <div id="filePickerReady"></div>
                        </div>
                    </div>
                    <ul class="filelist element-invisible">
                        <li id="filePickerBlock" class="filePickerBlock"></li>
                    </ul>
                </div>
            </div>

            <!-- 在线图片 -->
            <div id="online" class="panel">
                <div id="imageList"><var id="lang_imgLoading"></var></div>
            </div>

            <!-- 搜索图片 -->
            <div id="search" class="panel">
                <div class="searchBar">
                    <input id="searchTxt" class="searchTxt text" type="text" />
                    <select id="searchType" class="searchType">
                        <option value="&s=4&z=0"></option>
                        <option value="&s=1&z=19"></option>
                        <option value="&s=2&z=0"></option>
                        <option value="&s=3&z=0"></option>
                    </select>
                    <input id="searchReset" type="button" />
                    <input id="searchBtn" type="button" />
                </div>
                <div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
            </div>

            <!--引入集团图片-->
            <div id="materall" class="panel">
                <div id="materall_List" class="queueList">
                    <div class="ov_fl" style="margin:1px;">
                        <div class="fl li_h30 " style="margin: 5px;">
                            <img class="icon-img size-MINI" src="../../../../Skin/Blue/images/index.png" alt="" style="margin-right:5px;">
                            <p class="js_catelog" style="display: inline-block;color: #999999;font-size: 14px;"> <!--<span class="js_catelog_jumg">集团素材</span> > <span class="js_catelog_jumg">任务</span> > <span class="js_catelog_jumg">主席</span>--> </p>
                        </div>
                        <div class="fr ml_20">
                            <input class="input-text w140 js_DirName" style="width:71%" placeholder="搜索文件名称" type="text">
                            <span class="btn btn-primary radius js_DirName_btn" style=" float: right;">搜索</span>
                        </div>
                    </div>
                    <div class="ov_fl">
                        <div class="menu-block-box" style="border-top:1px solid #EBEBEB;height:100%;padding:5px 10px;margin: 5px;">
                            <section class="ov_fl js_body_block">
                                <!--<div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="4" filetype="dir"><div class="file-block folder"></div><p class="file-block-title">4</p></div>
                                <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="图片文件描述" filetype="image"><div class="file-block "><img src="http://localhost:55743//Uploads/image/20170124/201701241703224568216.jpg"></div><p class="file-block-title">图片</p></div>
                                <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="1111111111111" filetype="vedio"><div class="file-block"><img src="../../../../Skin/Blue/images/vedio.jpg" alt=""></div><p class="file-block-title">视频</p></div>-->
                            </section>
                        </div>
                    </div>
                </div>
            </div>

            <!--引入公众号图片-->
            <div id="matermy" class="panel">
                <div id="matermy_List" class="queueList">
                    <div class="ov_fl" style="margin:1px;">
                        <div class="fl li_h30 " style="margin: 5px;">
                            <img class="icon-img size-MINI" src="../../../../Skin/Blue/images/index.png" alt="" style="margin-right:5px;">
                            <p class="js_catelog" style="display: inline-block;color: #999999;font-size: 14px;"> <!--<span class="js_catelog_jumg">集团素材</span> > <span class="js_catelog_jumg">任务</span> > <span class="js_catelog_jumg">主席</span>--> </p>
                        </div>
                        <div class="fr ml_20">
                            <input class="input-text w140 js_DirName" style="width:71%" placeholder="搜索文件名称" type="text">
                            <span class="btn btn-primary radius js_DirName_btn" style=" float: right;">搜索</span>
                        </div>
                    </div>
                    <div class="ov_fl">
                        <div class="menu-block-box" style="border-top:1px solid #EBEBEB;height:100%;padding:5px 10px;margin: 5px;">
                            <section class="ov_fl js_body_block">
                                <!--<div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="4" filetype="dir"><div class="file-block folder"></div><p class="file-block-title">4</p></div>
                                <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="图片文件描述" filetype="image"><div class="file-block "><img src="http://localhost:55743//Uploads/image/20170124/201701241703224568216.jpg"></div><p class="file-block-title">图片</p></div>
                                <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="1111111111111" filetype="vedio"><div class="file-block"><img src="../../../../Skin/Blue/images/vedio.jpg" alt=""></div><p class="file-block-title">视频</p></div>-->
                            </section>
                        </div>
                    </div>
                </div>
            </div>

            <!--微信素材库-->
            <div id="materimage" class="panel">

                <div id="materimage_List" class="queueList">
                    <div class="ov_fl" style="margin:1px;">
                        <div class="fl li_h30 " style="margin: 5px;">
                            <img class="icon-img size-MINI" src="../../../../Skin/Blue/images/index.png" alt="" style="margin-right:5px;">
                            <p class="js_catelog" style="display: inline-block;color: #999999;font-size: 14px;"> <!--<span class="js_catelog_jumg">集团素材</span> > <span class="js_catelog_jumg">任务</span> > <span class="js_catelog_jumg">主席</span>--> </p>
                        </div>
                        <div class="fr ml_20">
                            <input class="input-text w140 js_materimage_name" style="width:71%" placeholder="搜索文件名称" type="text">
                            <span class="btn btn-primary radius js_materimage_search" style=" float: right;">搜索</span>
                        </div>
                    </div>
                    <div class="ov_fl">
                        <div class="menu-block-box" style="border-top:1px solid #EBEBEB;height:100%;padding:5px 10px;margin: 5px;">
                            <section class="ov_fl js_list_body">
                                <!--<div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="4" filetype="dir"><div class="file-block folder"></div><p class="file-block-title">4</p></div>
                    <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="图片文件描述" filetype="image"><div class="file-block "><img src="http://localhost:55743//Uploads/image/20170124/201701241703224568216.jpg"></div><p class="file-block-title">图片</p></div>
                    <div class="file-block-box" data-toggle="tooltip" data-placement="bottom" title="1111111111111" filetype="vedio"><div class="file-block"><img src="../../../../Skin/Blue/images/vedio.jpg" alt=""></div><p class="file-block-title">视频</p></div>-->
                            </section>
                        </div>
                    </div>
                </div>
                <div class=" pagination mt_20 js_materimage_page" style="text-align: left;width:100%;">
                    <!--<span class="gong_10">共5000条记录</span>
                    <a href="javascript:;" class="w55"> 首页</a>
                    <a href="javascript:;"><i class="icon-arrowLeft"></i></a>
                    <a href="javascript:;">1</a>
                    <a href="javascript:;" class="current">2</a>
                    <a href="javascript:;">3</a>
                    <a href="javascript:;"><i class="icon-arrowRight"></i></a>
                    <a href="javascript:;" class="w55">尾页</a>-->
                </div>


            </div>
            <script type='text/template' id='js_list_body_js_list_row'>
                <div class="file-block-box js_list_row" data-toggle="tooltip" data-placement="bottom" title="图片文件描述" filetype="image" data-source="ID">
                    <div class="file-block "><img src="http://localhost:55743//Uploads/image/20170124/201701241703224568216.jpg"></div>
                    <p class="file-block-title">图片</p>
                </div>
            </script>

        </div>
    </div>
    <script type="text/javascript" src="image.js"></script>
    <style>
        .pagination span.gong_10 {
            width:100px;
        }
    </style>


</body>
</html>